$black: #111;
$white: #fff;

@mixin arrow {
  width: 0;
  height: 0;
  border: 12px solid;
}
:host {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.step-line {
  display: flex;
  align-items: flex-start;
  width: 930px;
  &-reverse {
    flex-direction: row-reverse;
  }

  &-wrap {
    flex-wrap: wrap;
    justify-content: center;
  }

  > div {
    display: flex;
    align-items: center;
  }

  .step-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 154px;
    width: max-content;
    height: 60px;
    border-radius: 30px;
    background-color: $black;
    font-size: 18px;
    color: $white;
    line-height: 34px;
  }

  .arrow {
    &-right {
      @include arrow;
      margin: 0 2px 0 14px;
      border-color: transparent transparent transparent $black;
    }

    &-left {
      @include arrow;
      margin: 0 14px 0 2px;
      border-color: transparent $black transparent transparent;
    }

    &-down {
      @include arrow;
      margin: 14px 0 2px 0;
      border-color: $black transparent transparent transparent;
    }
  }
}
